<script setup lang='ts'>
import { ref, reactive, onMounted } from 'vue'
import { GetSafetyWarning } from '@/api/publicApi'
// import setUpTime from '@/utils/setUpTimes'
defineProps({
  num: {
    type: Number,
    default: 0
  }
})
// 定义变量
// 表格
// const tableData = [
//   {
//     date: '2016-05-03',
//     name: 'Tom',
//     address: 'No. 189, Grove St, Los Angeles'
//   },
//   {
//     date: '2016-05-02',
//     name: 'Tom',
//     address: 'No. 189, Grove St, Los Angeles'
//   },
//   {
//     date: '2016-05-04',
//     name: 'Tom',
//     address: 'No. 189, Grove St, Los Angeles'
//   },
//   {
//     date: '2016-05-01',
//     name: 'Tom',
//     address: 'No. 189, Grove St, Los Angeles'
//   },
//   {
//     date: '2016-05-01',
//     name: 'Tom',
//     address: 'No. 189, Grove St, Los Angeles'
//   },
//   {
//     date: '2016-05-01',
//     name: 'Tom',
//     address: 'No. 189, Grove St, Los Angeles'
//   },
//   {
//     date: '2016-05-01',
//     name: 'Tom',
//     address: 'No. 189, Grove St, Los Angeles'
//   }
// ]

const cellStyle = {
  textAlign: 'center'
}

const headStyle = {
  textAlign: 'center'
}

// 分页
const pageInfo = reactive({
  total: 100,
  pageSize: 10,
  pageNum: 1
})

// 参数对象
const fromList = reactive({
  BarWheelMachineCode: '',
  DeviceCode: '',
  MeasurePointCode: '',
  SafetyType: '',
  IsAck: false,
  IsError: '',
  WarningLevel: '',
  Sorting: '',
  SkipCount: 0,
  MaxResultCount: 10
})

// 数据源
const tableData: any = ref([])

// 定义函数
onMounted(() => {
  getProcessedData()
})

// 获取表格数据
const getProcessedData = async () => {
  tableData.value = []
  fromList.Sorting = 'ackTime desc'
  fromList.SkipCount = (pageInfo.pageNum - 1) * pageInfo.pageSize
  fromList.MaxResultCount = pageInfo.pageSize
  fromList.IsAck = true
  let res = await GetSafetyWarning(fromList)
  pageInfo.total = res.result.totalCount
  tableData.value = [ ...res.result.items ]
  tableData.value.forEach((item: any, index: number) => {
    switch (item.type) {
    case 0:
      tableData[index].typeName = '无'
      break
    case 1:
      tableData[index].typeName = '一氧化碳'
      break
    case 2:
      tableData[index].typeName = '甲烷'
      break
    case 3:
      tableData[index].typeName = '粉尘'
      break
    case 4:
      tableData[index].typeName = '烟感'
      break
    case 5:
      tableData[index].typeName = '风速'
      break
    case 6:
      tableData[index].typeName = '风压'
      break
    case 7:
      tableData[index].typeName = '设备振动'
      break
    case 8:
      tableData[index].typeName = '设备温度'
      break
    case 9:
      tableData[index].typeName = '结构振动'
      break
    case 10:
      tableData[index].typeName = '结构应力'
      break
    }
  })
  console.log('接口信息---->', res)
}

// 改变每页数量
const handlePlanSizeChange = (val: number) => {
  pageInfo.pageSize = val
  getProcessedData()
}
// 切换页码
const handlePlanCurrentChange = (val: number) => {
  pageInfo.pageNum = val
  getProcessedData()
}

// 向外暴露的函数与变量
defineExpose({
  getProcessedData
})
</script>

<template>
  <div class="table-box">
    <el-table
      :cell-style="cellStyle"
      :header-cell-style="headStyle"
      :data="tableData"
      max-height="640"
      size="small"
    >
      <el-table-column
        prop="date"
        label="位置"
      />
      <el-table-column
        prop="date"
        label="故障类型"
      />
      <el-table-column
        prop="address"
        label="故障等级"
      />
      <el-table-column
        prop="address"
        label="处理人"
      />
      <el-table-column
        prop="name"
        label="处理意见"
      />
      <el-table-column
        prop="name"
        label="处理时间"
      />
      <el-table-column
        prop="name"
        label="报警时间"
      />
    </el-table>
  </div>
  <div class="pagination-box">
    <el-pagination
      v-model:current-page="pageInfo.pageNum"
      v-model:page-size="pageInfo.pageSize"
      :page-sizes="[5, 10, 15, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
      @size-change="handlePlanSizeChange"
      @current-change="handlePlanCurrentChange"
    />
  </div>
</template>

<style scoped lang=scss>
.table-box {
  padding: 0 15px;
}

.pagination-box {
  margin-top: 10px;
  padding: 0 15px;
}
</style>